<template>
    <div>
        <van-popup v-model:show="showLeft" position="left" closeable :style="{ width: '100%', height: '100%' }">
            <div class="dialog-container">
                <div class="dialog-title">我的账号</div>
                <div class="dialog-img flex middle">
                    <van-image round width="52px" height="52px"
                        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
                    <div class="img-right flex_1 Beyond_one">
                        <div class="img-right-title Beyond_one">Bluesky9527</div>
                        <div class="img-right-id">ID：668899</div>
                    </div>
                </div>
                <div class="set-up">
                    <div class="set-up-title">设置</div>
                    <div class="set-up-list">
                        <van-cell @click="goToLink(item.type)" v-for="(item, index) in gridtextList" :key="index"
                            :value="item.value" :icon="getAssetsImge(item.icon)" is-link>
                            <template #title>
                                <span class="custom-title">{{ item.title }}</span>
                            </template>
                        </van-cell>

                    </div>
                </div>
                <div class="line"></div>
                <div class="set-up concerning">
                    <div class="set-up-title">关于</div>
                    <div class="set-up-list">
                        <van-cell @click="goToLink(item.type)" v-for="(item, index) in concerningList" :key="index"
                            :value="item.value" :icon="getAssetsImge(item.icon)" :is-link="item.isLink">
                            <template #title>
                                <span class="custom-title">{{ item.title }}</span>
                            </template>
                        </van-cell>

                    </div>
                </div>
            </div>
        </van-popup>
        <FormDialog height="205px" titleRight="提示" ref="formDialogRef">
            <template #content>
                <div class="logOut-title">
                    确定要退出登录吗？
                </div>
            </template>
            <template #footer>
                <div class="flex middle between">
                    <FooterBtn class="cut-out-buttons cut-out-buttons-mr" title="取消" />
                    <FooterBtn title="确定退出" />
                </div>
            </template>
        </FormDialog>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter();
// import { getAssetsImge } from '@/utils/validation'
import { useLeftDialog } from './hooks/useLeftDialog'
const getAssetsImge = (url: any) => {
    return new URL(`../../../assets/images/icon/my-account/${url}`, import.meta.url).href
}
const {
    showLeft,
    toggle,
    gridtextList,
    concerningList
} = useLeftDialog()

const openDialog = () => {
    toggle(true)
}
const formDialogRef = ref()


const goToLink = (type: any) => {
    const typeMap: { [key: string]: () => void } = {
        paymentMethods: () => {
            router.push({
                path: "paymentMethods"
            })
        },
        personalInformation: () => {
            router.push({
                path: "personalInformation"
            })
        },
        securitySettings: () => {
            router.push({
                path: "securitySettings"
            })
        },
        countryOfRegistration: () => {
            router.push({
                path: "countryOfRegistration"
            })
        },
        helpCenter: () => {
            router.push({
                path: "helpCenter"
            })
        },
        privacyPolicy: () => {
            router.push({
                path: "privacyPolicy"
            })
        },
        aboutUs: () => {
            router.push({
                path: "aboutUs"
            })
        },
        logOut: () => {
            formDialogRef.value.openDialog()
        },
    }
    const handle = typeMap[type]
    handle()
}


defineExpose({
    openDialog
})
</script>

<style lang="scss" scoped>
.dialog-container {
    color: $baseColor;
    padding: 8px 10px;

    .dialog-title {
        font-size: 9px;
        font-weight: 600;
    }

    .dialog-img {
        margin-top: 16px;
        margin-bottom: 10px;

        .img-right {
            margin-left: 6px;

            .img-right-title {
                font-size: 9px;
                font-weight: 600;
                margin-bottom: 5px;
            }

            .img-right-id {
                font-size: 7px;
                font-weight: 400;

            }
        }

    }

    .set-up {
        &-title {
            font-size: 7px;
            font-weight: 400;
            color: $baserGrey;
        }

        &-list {
            .custom-title {
                font-size: 8px;
            }
        }
    }

    .line {
        width: 100%;
        height: 4px;
        background-color: $baseline;
        position: absolute;
        left: 0;
        margin-top: 6px;
    }

    .concerning {
        margin-top: 20px;
    }
}

:deep(.van-icon-cross:before) {
    margin-top: 2px;
    color: $baseColor
}

:deep(.van-cell) {
    padding: 9px 0;
}

:deep(.van-icon__image) {
    width: 12px;
    height: 12px;
}

.logOut-title {
    font-size: 9px;
    font-weight: 500;
    text-align: center;
    color: #000000;
    margin-top: 12px;
    margin-bottom: 20px;
}
</style>